<template>
  <div class="container">
    <div class="cont-bg">
      <img class="bg" src="@/assets/bg_pirse.png">
      <div v-if="list.length<=0" class="miva-jiang">
        <div>~QAQ~</div>
        <div>您当前还未中奖哦~</div>
      </div>
    </div>

    <div class="scroll-info">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="mivaOnLoad"
      >
        <itemCard v-for="(temp,index) in list" :key="index" :temp="temp" />
      </van-list>
    </div>
    <copy />
  </div>
</template>
<script>
import { userPrize } from '@/api/utils'
import itemCard from './item-card'
import copy from '@/components/layer/copy'
export default {
    components: { itemCard, copy },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            num: 0
        }
    },
    async created() {
        // const res = await userPrize({})
        // console.log(res)
        // this.list = res.data
        this.mivaOnLoad()
    },
    methods: {
        async mivaOnLoad() {
            this.num++
            const res = await userPrize({
                page: this.num,
                size: 3
            })
            this.list = [...this.list, ...res.data]
            this.loading = false
            if (res.data.length === 0) {
                this.finished = true
            }
        }
    }
}
</script>

<style >
.van-list__error-text, .van-list__finished-text, .van-list__loading {
  color: #fff !important;
}
</style>

<style lang="less" scoped>
.container {
  width: 100%;
  height: calc(100vh - 45px);
  position: relative;
  overflow: hidden;
  .cont-bg {
    width: 100%;
    position: absolute;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .bg {
    width: 100%;
  }
  .miva-jiang {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color:#fff;
  }
  .scroll-info {
    height: calc(100vh - 45px - 30vw);
    padding-bottom: 100px;
    box-sizing: border-box;
    position: absolute;
    top: 16vw;
    overflow-y: scroll;
  }
}
</style>
